.bttn-jelly
  {bttnBaseStyle}
  {bttnMdSize}
  overflow hidden
  border-radius 50px;
  background cWhite
  color cBlue
  transition all 0.2s anim_func
  &:before
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius 50px;
    background: currentColor;
    content: '';
    z-index -1
    opacity: 0;
    transition all 0.2s anim_func
    transform scale(0.2)
  &:hover, &:focus
    box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .6)
    transition all 0.3s anim_func
    transform scale(1.1)
    &:before
      opacity: 0.15
      transition all 0.3s anim_func
      transform scale(1)
  &.bttn-xs
    {bttnXsSize}
    &:hover, &:focus
      box-shadow 0 1px 4px cBlack - rgba(0, 0, 0, .6)
  &.bttn-sm
    {bttnSmSize}
    &:hover, &:focus
      box-shadow 0 1px 6px cBlack - rgba(0, 0, 0, .6)
  &.bttn-md
    {bttnMdSize}
    &:hover, &:focus
      box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .6)
  &.bttn-lg
    {bttnLgSize}
    &:hover, &:focus
      box-shadow 0 1px 10px cBlack - rgba(0, 0, 0, .6)
  &.bttn-default
    background cWhite
    color cBlue
  &.bttn-primary
    background cBlue
    color cWhite
  &.bttn-warning
    background cYellow
    color cWhite
  &.bttn-danger
    background cRedLight
    color cWhite
  &.bttn-success
    background cGreen
    color cWhite
  &.bttn-royal
    background cPurple
    color cWhite